<template>
  <div>
    <el-card class="top">
      <el-form :inline="true"  class="demo-form-inline">
        <el-form-item label="车辆类型:" >
    <el-select v-model="tableData.truckTypeName" placeholder="请选择">
      <el-option v-for="item in tableData " :key="item.id" :label="item.truckTypeName" :value="item.id"></el-option>
    </el-select>
  </el-form-item>
  <el-form-item label="车牌号码:" label-width="180px">
    <el-input v-model="tableData.licensePlate" placeholder="请输入车牌号码"></el-input>
  </el-form-item>
  <el-form-item class="btn">
     <el-button type="danger" @click="serch">搜索</el-button>
    <el-button  @click="reset">重置</el-button>
  </el-form-item>
</el-form>
    </el-card>
    <el-card class="tab-item">
    <el-row type="flex" justify="left">
       <div class="item" :class="{active:!searchText.status}" @click="changeStatus(null)">
          <span>全部 </span>{{ statusPlus }}
        </div>
        <div class="item" :class="{active:searchText.status==='1'}" @click="changeStatus('1')">
          <span>可用 </span>{{ statusCount[1] }}
        </div>
        <div class="item" :class="{active:searchText.status==='2'}" @click="changeStatus('2')">
          <span>停用 </span>{{ statusCount[2] }}
        </div>

    </el-row>
  </el-card>
    <!-- 下半部分 -->
     <!-- 下半部分 -->
      <el-card style="margin-top:20px;">
        <el-row>
          <el-button  type="danger">新增车辆</el-button>
        </el-row>
        <!-- 表格部分 -->
          <el-table
          stripe
      :data="tableData"
      style="width: 100%">
      <el-table-column label="序号"  type="index"> </el-table-column>
      <el-table-column prop="licensePlate" label="车型号码" > </el-table-column>
      <el-table-column prop="truckTypeName" label="车辆类型" > </el-table-column>
      <el-table-column prop="driverNum" label="司机数量" > </el-table-column>
      <el-table-column prop="status" label="车辆状态" >
        <!-- <template #default="{row}"> -->
          <!-- {{row.status}} -->
          <!-- <el-badge is-dot class="item" v-if="row.status" type="danger" :formatter="formatRole"></el-badge>
            <el-badge is-dot class="item"  v-else></el-badge>
            {{row.status===1?'停用':row.status===2?'可用':1}}
        </template> -->
         <template #default="{row}" >
            <el-badge is-dot class="item"  type="danger" v-if="row.status" :formatter="formatRole"></el-badge>
             <el-badge is-dot class="item"  v-else></el-badge>
             {{row.status===1?'停用':row.status===2?'可用':'未知'}}
           </template>
         </el-table-column>
      <el-table-column prop="deviceGpsId" label="GPS设备ID" > </el-table-column>
      <el-table-column prop="allowableLoad" label="实载重量(T)" > </el-table-column>
      <el-table-column prop="allowableVolume" label="实载体积(方)" > </el-table-column>
      <el-table-column  label="操作" width="200px">
        <!-- 插槽 -->
        <template #default="{row}">
         <el-link :underline="false" type="primary" @click="$router.push(`vehiclelist/info/${row.id}`)">查看详情</el-link>
         <el-divider direction="vertical" ></el-divider>
          <el-link :underline="false" type="primary">启用</el-link>
            <el-divider direction="vertical" ></el-divider>
             <el-link :underline="false" type="primary" @click="handleClick(row)">配置司机</el-link>
        </template>
      </el-table-column>
    </el-table>
         <!-- 分页 -->
  <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageInfo.page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="pageInfo.pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>
      </el-card>
       <!-- 配置司机对话框 -->
  <el-dialog
  title="车辆配置"
  :visible.sync="showDialog"
  width="30%">
  <el-row style="margin-bottom:10px;">配置车辆需满足以下条件：</el-row>
  <el-row type="flex" justify="space-around" style="margin-bottom:10px;">
    <el-col>
      <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;">1</span>
      司机信息已完善
      </el-col>
    <el-col>
      <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;">2</span>
      司机已设置排班
      </el-col>
  </el-row>
  <el-row style="margin-bottom:10px;">
    <span style="width: 16px; height: 16px; background: rgb(250, 252, 255); border: 1px solid rgb(235, 238, 245); border-radius: 50%; display: inline-block; text-align: center; margin-right: 6px; line-height: 14px;">3</span>
    司机绑定车辆未在启用状态
    </el-row>
  <span slot="footer" class="dialog-footer">
    <el-button @click="showDialog = false" size="mini">取 消</el-button>
    <el-button type="danger" @click="submit" size="mini">确 定</el-button>
  </span>
</el-dialog>
<!-- 第二个弹框 -->
<el-dialog
  title="配置车辆"
  :visible.sync="twoDialog"
  width="40%"
 >
    <el-card style=" background-color: #fbfafa;margin-bottom:15px;">
    <el-row type="flex" justify="space-around">
      <el-col>车牌号：{{formdata.licensePlate}}</el-col>
      <el-col>车型：{{formdata.truckTypeName}}</el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col >车辆状态：<span class="cartstatus">{{formdata.status===1?'可用':'不可用'}}</span></el-col>
      <el-col >实载重量：{{formdata.allowableLoad}}</el-col>
    </el-row>
    <el-row type="flex" justify="space-around">
      <el-col>实载体积：{{formdata.allowableVolume}}</el-col>
    </el-row>
  </el-card>

  <span>配置车辆：</span>
  <!-- <el-select
  @change="change"
  value-key="id"
    v-model="value"
    placeholder="请选择文章标签">
    <el-option
      v-for="item in formdata"
      :key="item.id"
      :label="item.truckTypeName"
      :value="item.id">
    </el-option>
  </el-select> -->

  <el-table
  :header-cell-style="{background:'#f8faff',color:'#818693'}"

      style="width: 100%;margin-top:15px;">
      <el-table-column  label="序号" width="180" />
      <el-table-column  label="司机名称" width="180" >
      </el-table-column>
      <el-table-column  label="操作" width="180">
        <!-- <template #default="{row}">
               <el-button  type="text" size="small" @click="$router.push(`drivermanagement/driverCart/${row.truck.id}`)">查看</el-button>
              <el-divider direction="vertical"></el-divider>
             <el-button style="color:red;" type="text"  size="small" @click="remove(row.id)">删除</el-button>
        </template> -->
      </el-table-column>
    </el-table>
  <span slot="footer" class="dialog-footer" style="  text-align: center;">
    <el-button @click="twoDialog = false" type="danger">确 定</el-button>
    <el-button  @click="twoDialog = false">取 消</el-button>
  </span>
</el-dialog>
  </div>
</template>

<script>
// getPagingApi
import { getPagingApi } from '@/api/chelmanagement'
// import {  getVehicleDetailsApi } from '@/api/chelmanagement'
import { getCartfenyedata, getWorkStatusApi } from '@/api/vehiclelist'
import { getTransportCount } from '@/api/waybillmanagement'
export default {
  name: 'vehicle-list',
  data () {
    return {

      searchText: {
        status: null
      },
      statusCount: {},
      value: '',
      formdata: {},
      twoDialog: false,
      showDialog: false,
      formInline: [],
      tableData: [],
      pageInfo: {
        page: 1,
        pageSize: 10
      },
      total: 0,
      tabs: [
        {
          name: '全部',
          num: null
        },
        {
          name: '可用',
          num: null
        },
        {
          name: '停用',
          num: null
        }
      ]
    }
  },
  methods: {
    async getStatusCount () {
      const { data } = await getWorkStatusApi()
      this.statusCount = data
    },
    async getTransportCountList () {
      const { data: res } = await getTransportCount()
      console.log(res)
      this.statusCount = res
    },
    // 按钮触发的函数
    async changeStatus (newStatus) {
      this.searchText.status = newStatus
      this.getCartList()
    },
    change (id) {
      console.log(id)
    },
    // 点击第一个确定按钮
    submit () {
      this.twoDialog = true
    },
    // 配置司机
    handleClick (row) {
      console.log(row)
      this.showDialog = true
      this.formdata = row
    },
    // 车辆状态处理
    formatRole: function (row, column) {
      console.log(row)
      // return row.status === 1 ? '停用' : '可用'
      if (row.status === 1) {
        return '停用'
      } else if (row.status === 2) {
        return '可用'
      }
    },
    handleSizeChange (newPageSize) {
      // console.log(newPageSize)
      this.pageInfo.pageSize = newPageSize
      this.getCartList()
    },
    handleCurrentChange (page) {
      // console.log(page)
      this.pageInfo.page = page
      this.getCartList()
    },
    // 搜索
    async  serch () {
      // const { data: res } = await getCartfenyedata(this.pageInfo)
      // this.tableData = res.items
      this.getCartList()
    },
    // 重置
    reset () {
      // console.log('重置')
      this.tableData.truckTypeName = ''
      this.tableData.licensePlate = ''
      this.getCartList()
    },
    // 获取table表格信息
    async getCartList () {
      await this.getStatusCount()
      const { data: res } = await getCartfenyedata(this.pageInfo, this.searchText)
      // console.log(res.items)
      // this.formInline = res.items
      console.log(res)
      this.tableData = res.items
      this.pageInfo.page = res.page
      this.pageInfo.pageSize = res.pageSize
      this.total = +res.counts
      // this.formdata = res.items
    },
    // 获取分页数据
    async getPaging () {
      // const { data: res } = await getCartfenyedata(this.pageInfo)
      // console.log(res)
      // this.tableData = res.items
      // this.counts = +res.counts
      // this.pageInfo.page = res.page
      // this.pageInfo.pageSize = res.pageSize
    },
    async getCartInfo () {
      const res = await getPagingApi(this.pageInfo)
      console.log(res)
    }
  },
  created () {
    // 获取table表格信息
    this.getCartList()
    // 获取分页数据
    this.getPaging()
    this.getTransportCountList()
  },
  computed: {
    statusPlus () {
      return parseInt(this.statusCount['0']) + parseInt(this.statusCount['1']) || ''
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  margin-left: 50px;
}
.center {

  // display: flex;
  margin-top: 20px;
  padding-bottom: 20px;
  margin-bottom: 20px;
  border-radius: 4px;
}
// .all {
// padding: 20px 0px;
// }
.el-pagination {
  text-align: center;
}
.item {
  margin-bottom: -5px;
}
.active {
  background-color: rgb(255,238,235);
  color:rgb(225,85,54);
}
.list-change {
  display: flex;
}
.green{
  background-color: #1dc779;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.red{
  background-color: red;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: 8px;
}
.cartstatus {
  background: #37c608;
  // display: inline-block;
    // text-align: center;
    // line-height: 20px;
    // width: 41px;
    // height: 20px;
    border-radius: 10px;
    color: #fff;
    font-size: 12px;
}
.tab-item {
    margin-top: 20px;
    ::v-deep .el-card__body {
      padding: 0;
    }

    .item {
      width: 120px;
      height: 48px;
      text-align: center;
      line-height: 48px;
      font-size: 14px;
      cursor: pointer;
      font-weight: bold;

      span {
        font-weight: normal;
      }
    }

    .active {
      background: #ffeeeb;
      color: #e15536;
    }
}
</style>
